<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>


      <el-table-column align="center" label="id" width="100">
        <template slot-scope="scope">
          {{ scope.row.blogId }}
        </template>
      </el-table-column>

      <el-table-column label="标题" >
        <template slot-scope="scope">
          {{ scope.row.blogTitle }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="更新时间" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>


      <el-table-column label="编辑" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(  scope.row)">编辑</el-button>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="删除" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(  scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination class="articlePaginnation"
                   background
                   @current-change="handleCurrentChange"
                   layout="prev, pager, next"
                   :page-size="20"
                   :total=pageSum>
    </el-pagination>

  </div>
</template>

<script>
  import {getBlogList ,deleteBlogById} from '@/api/apis'
  export default {

    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: null,
        listLoading: true,
        currentBlogId:0 ,
        currentPageNum: 1,
        pageSum: 0  , //  数据总条数


      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true

        getBlogList(20 ,this.currentPageNum).then(response => {
          console.log("获取到文章列表=")
          console.log(response.list)
          this.pageSum = response.sum
          this.list = response.list
          this.listLoading = false
        })
      } ,
      handleDelete(  row) {
        // this.$message.success(row.blogId)
        this.currentBlogId = row.blogId ;
        this.$confirm('删除操作无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(
          () => {

            deleteBlogById( this.currentBlogId).then(response => {
              this.fetchData()
              this.$message.success("删除成功" );
            }).catch( (error)=> {
              this.$message.success("删除失败" );
            })
          }
        ).catch(
          // 取消删除
        )
      },//

      handleEdit(row){
        this.currentBlogId = row.blogId ;
        let routeData = this.$router.resolve({ path: '/edite', query: {  blogId:  this.currentBlogId } });
        window.open(routeData.href, '_blank');
      } ,
      handleCurrentChange(val) {
        this.currentPageNum =val
        this.fetchData()
      } ,

    }
  }
</script>

<style>
  .articlePaginnation {
    text-align: center;
    margin-top: 20px;
  }

</style>


